<template>
  <div class="searchATimeBox">
    <!-- 时间显示 -->
    <div class="timeBox">{{ nowHour }}:{{ nowMin }}</div>
    <!-- 搜索框 -->
    <div
      class="searchBox"
      @keydown.alt.49.prevent="fastChangeEngine(0)"
      @keydown.alt.50.prevent="fastChangeEngine(1)"
      @keydown.alt.51.prevent="fastChangeEngine(2)"
      @keydown.alt.52.prevent="fastChangeEngine(3)"
      @keydown.alt.53.prevent="fastChangeEngine(4)"
      @keydown.alt.54.prevent="fastChangeEngine(5)"
      @keydown.alt.55.prevent="fastChangeEngine(6)"
      @keydown.alt.56.prevent="fastChangeEngine(7)"
      @keydown.alt.57.prevent="fastChangeEngine(8)"
      @keydown.alt.58.prevent="fastChangeEngine(9)"
    >
      <input
        type="text"
        class="searchInput"
        :style="searchInputStyle"
        placeholder="搜索"
        v-model="keyword"
        @keyup="getSearch($event)"
        @keydown.down.prevent="selectDown"
        @keydown.up.prevent="selectUp"
        @click="clearmyData()"
        @blur="listOff()"
        @focus="listOn()"
        ref="inp"
        @mousedown.stop
        :class="{ searchInputDark: darkFlag }"
      />
      <transition name="appear">
        <div
          class="engineChoose"
          @mousedown.prevent="searchListOn()"
          v-if="this.listOnFlag"
        >
          <svg class="icon iconChoose" aria-hidden="true">
            <use :xlink:href="usingEngineID"></use>
          </svg>
        </div>
      </transition>
      <div class="searchBtn" @mousedown.prevent="btnSearch">
        <span
          class="iconfont icon-sousuo1"
          :class="{ 'icon-sousuo1Dark': darkFlag }"
        ></span>
      </div>
      <!-- 下拉菜单 -->
      <div
        class="showList"
        :style="showListStyle"
        :class="{ showListDark: darkFlag }"
      >
        <ul>
          <li
            class="showLi"
            v-for="(item, index) in myData"
            :key="index"
            @mousedown="clickJump(item)"
            v-show="myData.length != 0"
            :class="{
              liClassChoose: index == listIndex,
              liClassChooseDark: (index == listIndex) & darkFlag,
            }"
          >
            <span>{{ item }}</span>
          </li>
        </ul>
      </div>
    </div>
    <!-- 搜索引擎切换 -->
    <div
      class="searchChooseBox"
      :style="searchChooseStyle"
      @mousedown.prevent
      :class="{ searchChooseBoxDark: darkFlag }"
    >
      <div
        class="engine"
        v-for="(item, index) in engineList"
        :key="index"
        @click="changeSearch(item.engineIcon, index)"
        :class="{ engineDark: darkFlag }"
      >
        <svg
          class="icon icon-delete"
          aria-hidden="true"
          v-if="item.engineIcon == '#icon-liulanqi'"
          @click.stop="enginDeleteDis(item.engineIcon, index)"
        >
          <use xlink:href="#icon-guanbi"></use>
        </svg>
        <svg class="icon icon-set" aria-hidden="true">
          <use :xlink:href="item.engineIcon"></use>
        </svg>
        <p class="engineName">{{ item.engineName }}</p>
        <p class="altP" v-if="index < 9">Alt + {{ index + 1 }}</p>
      </div>
      <div
        class="engine"
        @click="addEngine()"
        :class="{ engineDark: darkFlag }"
      >
        <!-- <svg class="icon icon-set" aria-hidden="true">
          <use xlink:href="#icon-zengjia"></use>
        </svg> -->
        <!-- <span class="icon icon-set icon-zengjia"></span> -->
        <i class="el-icon-plus icon-set"></i>
        <p class="engineName">新增</p>
      </div>
    </div>
    <!-- 新建引擎弹窗 -->
    <transition name="appear">
      <div
        class="addEngineBg"
        v-if="this.addflag"
        :class="{ addEngineBgDark: darkFlag }"
      >
        <div class="addEngineBox" :class="{ addEngineBoxDark: darkFlag }">
          <h2 style="text-align: center; margin-bottom: 5px">新增搜索引擎</h2>
          <p>新建搜索引擎名称：</p>
          <p style="color: grey; font-size: 14px">默认名称为“自定义”</p>
          <input
            type="text"
            class="enginInput"
            v-model="newEngineName"
            :class="{ enginInputDark: darkFlag }"
          />
          <p>搜索引擎网址:</p>
          <p style="color: grey; font-size: 14px">
            请以 https://开头，结尾添加其关键词链接符
          </p>
          <p style="color: grey; font-size: 14px">
            输入示例: https://www.baidu.com/s?wd=
          </p>
          <transition name="urlWarn">
            <p
              style="color: red; font-size: 14px; display: inline-block"
              v-if="warnFlag"
            >
              请输入正确的Url!
            </p>
          </transition>
          <input
            type="text"
            class="enginInput"
            v-model="newEngineUrl"
            :style="enginInputWarn"
            placeholder="https://"
            :class="{ enginInputDark: darkFlag }"
          />
          <br />
          <button style="margin-left: 155px" @click="sendEngine">确定</button>
          <button style="margin-left: 35px" @click="addEngine">取消</button>
        </div>
      </div>
    </transition>
    <!-- 删除搜索引擎弹窗 -->
    <transition name="appear">
      <div
        class="bgBox"
        v-if="enginDeleteFlag"
        :class="{ bgBoxDark: darkFlag }"
      >
        <div
          class="addEngineBox"
          :class="{ addEngineBoxDark: darkFlag }"
          style="width: 280px; height: 150px; top: 400px; left: 850px"
        >
          <h2 style="text-align: center; margin-bottom: 25px">确认删除</h2>
          <p style="text-align: center; margin-bottom: 20px">
            确认删除该搜索引擎吗？
          </p>
          <button style="margin-left: 50px" @click="enginDeleteOK">确定</button>
          <button style="margin-left: 30px" @click="enginDeleteNO">取消</button>
        </div>
      </div>
    </transition>
  </div>
</template>
<script>
import bus from "../bus";
import axios from "axios";
export default {
  data() {
    return {
      timer: undefined,
      nowHour: new Date(),
      nowMin: new Date(),
      myData: [],
      keyword: "",
      keyLength: 0,
      listIndex: -1,
      judge: 0,
      tojump: "_self",
      // tojump: "_target",
      showListStyle: {
        height: "",
        boxShadow: "",
      },
      searchInputStyle: {
        color: "",
      },
      searchChooseStyle: {
        height: "0px",
        maxHeight: "0px",
        boxShadow: " 0 0 0px 0px rgba(173, 173, 173, 0.2)",
      },
      // 搜索引擎切换列表flag
      flag: false,
      // input获取焦点flag
      listOnFlag: false,
      // 正在使用的搜索引擎
      usingEngineID: "#icon-bing",
      usingEngineUrl: "https://cn.bing.com/search?q=",
      // 新建自定义搜索引擎
      newEngineName: "",
      newEngineUrl: "",
      // 搜索引擎库
      engineList: [
        {
          engineName: "必应",
          engineIcon: "#icon-bing",
          engineUrl: "https://cn.bing.com/search?q=",
        },
        {
          engineName: "百度",
          engineIcon: "#icon-baidu",
          engineUrl: "https://www.baidu.com/s?wd=",
        },
        {
          engineName: "谷歌",
          engineIcon: "#icon-guge",
          engineUrl: "https://www.google.com/search?q=",
        },
        {
          engineName: "搜狗",
          engineIcon: "#icon-sougou",
          engineUrl: "https://www.sogou.com/web?query=",
        },
        {
          engineName: "360搜索",
          engineIcon: "#icon-sousuo1",
          engineUrl: "https://www.so.com/s?q=",
        },
        {
          engineName: "哔哩哔哩",
          engineIcon: "#icon-bilibili",
          engineUrl: "https://search.bilibili.com/all?keyword=",
        },
        {
          engineName: "抖音",
          engineIcon: "#icon-douyin",
          engineUrl: "https://www.douyin.com/search/",
        },
        {
          engineName: "GitHub",
          engineIcon: "#icon-GitHub",
          engineUrl: "https://github.com/search?q=",
        },
        {
          engineName: "CSDN",
          engineIcon: "#icon-csdn",
          engineUrl: "https://so.csdn.net/so/search?spm=1000.2115.3001.4498&q=",
        },
        {
          engineName: "Gitee",
          engineIcon: "#icon-gitee",
          engineUrl: "https://search.gitee.com/?skin=rec&type=repository&q=",
        },
      ],
      // 删除搜索引擎
      enginDeleteFlag: false,
      enginDeleteID: "",
      enginDeleteIndex: 99999,
      // 新增搜索引擎
      addflag: false,
      enginInputWarn: {
        border: "",
      },
      warnFlag: false,
      // darkFlag: false,
      // 清空搜索框
      inputClearFlag: false,
      user_id: -99999,
      engine_id: -99999,
    };
  },
  created() {
    this.getTime();
    this.timerClock = setInterval(() => this.getTime(), 30000);
  },
  mounted() {
    this.getTime();
    this.timerClock = setInterval(() => this.getTime(), 30000);
    bus.$on("enginChangeFlag", (flag) => {
      this.flag = flag;
    });
    bus.$on("enginFlag", (flag) => {
      this.inputClearFlag = flag;
    });
    // 获取user_id
    bus.$on("useridFlag", (id) => {
      this.user_id = id;
    });
    let engineID = JSON.parse(window.localStorage.getItem("engineID"));
    let engineUrl = JSON.parse(window.localStorage.getItem("engineUrl"));
    if (!engineID || engineID.length == 0) {
      engineID = "#icon-bing";
      engineUrl = "https://cn.bing.com/search?q=";
      this.usingEngineID = engineID;
      this.usingEngineUrl = engineUrl;
    } else {
      this.usingEngineID = engineID;
      this.usingEngineUrl = engineUrl;
    }
  },
  beforeUnmount() {
    if (this.timerClock) {
      clearInterval(this.timerClock);
    }
  },
  beforeDestroy() {
    bus.$off();
  },
  computed:{
    darkFlag(){
      return this.$store.state.darkFlag
    }
  },
  watch: {
    // 监视数组长度，根据数组长度实时渲染列表高度
    "myData.length": {
      handler() {
        // let length = this.myData.length;
        // if(length==)
        if ((this.keyword.length == 0) | (this.keyword == "")) {
          this.myData = [];
        }
        this.listOn();
      },
    },
    "engineList.length": {
      handler() {
        this.searchChooseStyle.height =
          (this.engineList.length + 1) * 50 + "px";
        this.searchChooseStyle.height = "0px";
        this.searchChooseStyle.boxShadow = "0 0 0px 0px transparent";
      },
    },
    flag: {
      handler() {
        if (this.flag) {
          this.searchChooseStyle.height =
            (this.engineList.length + 1) * 50 + "px";
          this.searchChooseStyle.maxHeight = "295px";
          this.searchChooseStyle.boxShadow =
            "0 0 5px 2px rgba(173, 173, 173, 0.2)";
        } else {
          this.searchChooseStyle.height = "0px";
          this.searchChooseStyle.boxShadow = "0 0 0px 0px transparent";
        }
      },
    },
    // 动态渲染列表内容 输入为空清空列表
    keyword: {
      handler() {
        if (
          (this.keyword.length == 0) |
          (this.keyword == "") |
          (this.keyword == undefined)
        ) {
          this.myData = [];
        }
      },
    },
    // 获取自定义搜索引擎列表接口
    user_id: {
      handler() {
        axios
          .get(this.$baseUrl+"/getEngineList", {
            params: {
              user_id: this.user_id,
            },
          })
          .then((response) => {
            for (let i = 0; i <= response.data.length; i++) {
              let obj = {
                engine_id: response.data[i].engine_id,
                engineName: response.data[i].engineName,
                engineIcon: "#icon-liulanqi",
                engineUrl: response.data[i].engineUrl,
              };
              this.engineList.push(obj);
              obj = {};
            }
          })
          .catch(function () {
            // this.$message.error("获取自定义搜索引擎列表失败！");
            return;
          });
      },
    },
  },
  methods: {
    // 时间显示
    getTime() {
      this.nowHour =
        new Date().getHours().toLocaleString() < 10
          ? "0" + new Date().getHours().toLocaleString()
          : new Date().getHours().toLocaleString();

      this.nowMin =
        new Date().getMinutes().toLocaleString() < 10
          ? "0" + new Date().getMinutes().toLocaleString()
          : new Date().getMinutes().toLocaleString();
    },
    //输入框为空关闭下拉列表
    clearmyData() {
      if (this.keyword == "") {
        this.myData = [];
      }
    },
    // 点击搜索按钮跳转
    btnSearch() {
      window.open(this.usingEngineUrl + this.keyword, this.tojump);
      this.keyword = "";
      // 关闭搜索引擎切换列表
      this.flag = false;
    },
    // input获取焦点，渲染列表高度
    listOn() {
      let listHeight = this.myData.length * 37;
      this.showListStyle.height = listHeight + "px";
      this.showListStyle.boxShadow = "2px 2px 2px rgba(0, 0, 0, 0.2)";
      // input获取焦点 listOnFlag为true
      this.listOnFlag = true;
      if (this.myData != []) {
        this.searchInputStyle.color = "black";
      }
    },
    // input失去焦点，关闭下拉列表以及搜索引擎列表
    listOff() {
      this.showListStyle.height = "0px";
      // 在下拉列表中按上下键选择-1索引（默认为空）同时 keyword为undefined时，清空数组
      if ((this.listIndex == -1) & (this.keyword == undefined)) {
        this.myData = [];
      }
      if (this.myData != []) {
        this.searchInputStyle.color = "rgb(255, 255, 255)";
      }
      // input失去焦点 listOnFlag为false
      this.listOnFlag = false;
      // 关闭搜索引擎切换列表
      this.flag = false;
      // 清空搜索框
      if (this.inputClearFlag) {
        this.keyword = "";
      }
      this.listIndex = -1
    },
    //点击下拉列表具体项跳转
    clickJump(item) {
      window.open(this.usingEngineUrl + item, this.tojump);
    },
    // 搜索主体函数
    getSearch(event) {
      // 按方向键上下键返回
      if (event.keyCode == 38 || event.keyCode == 40) return;
      // 按enter键
      if (event.keyCode == 13) {
        window.open(this.usingEngineUrl + this.keyword, this.tojump);
        this.keyword = "";
        this.myData = [];
      }
      if (this.keyword.length == this.keyLength) {
        return;
      }
      this.keyLength = this.keyword.length;
      if (this.keyword == "") return;
      axios
        .get(this.$baseUrl+"/baidu", {
          params: {
            wd: this.keyword,
          },
        })
        .then((response) => {
          let arr = this.parseSuggestionData(response.data);
          this.myData = arr;
          this.myData[0] = this.keyword;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 快捷键切换搜索引擎
    fastChangeEngine(num) {
      this.changeSearch(this.engineList[num].engineIcon, num);
    },
    // axios请求函数 请求路径配置文件在vue.config.js中
    // 百度搜索
    // getBaidu() {
    //   axios
    //     .get("/baidu", {
    //       params: {
    //         wd: this.keyword,
    //       },
    //     })
    //     .then((response) => {
    //       let arr = this.parseSuggestionData(response.data);
    //       this.myData = arr;
    //       this.myData[0] = this.keyword;
    //       // console.log(1111111);
    //     })
    //     .catch((err) => {
    //       console.log(err);
    //     });
    // },
    // 解析百度接口
    parseSuggestionData(data) {
      const regex = /\[.*?\]/;
      const match = regex.exec(data);
      if (match && match.length > 0) {
        const suggestions = JSON.parse(match[0]);
        return suggestions;
      }
      return [];
    },

    // 按方向键下选择
    selectDown() {
      this.listIndex++;
      if (this.listIndex == this.myData.length) this.listIndex = -1;
      this.keyword = this.myData[this.listIndex];
    },
    // 按方向键上选择
    selectUp() {
      this.listIndex--;
      if (this.listIndex == -2) this.listIndex = this.myData.length - 1;
      this.keyword = this.myData[this.listIndex];
    },
    // 控制搜索引擎列表开关
    searchListOn() {
      // 开启搜索引擎切换列表
      this.flag = !this.flag;
    },
    // 切换搜索引擎
    changeSearch(name, index) {
      // id匹配,更改url
      this.usingEngineID = name;
      if (this.usingEngineID == this.engineList[index].engineIcon) {
        this.usingEngineUrl = this.engineList[index].engineUrl;
      }
      window.localStorage.setItem(
        "engineID",
        JSON.stringify(this.usingEngineID)
      );
      window.localStorage.setItem(
        "engineUrl",
        JSON.stringify(this.usingEngineUrl)
      );

      this.searchChooseStyle.height = "0px";
      this.searchChooseStyle.boxShadow = "0 0 0px 0px transparent";
      // 关闭搜索引擎切换列表
      this.flag = false;
    },
    // 删除搜索引擎弹窗
    enginDeleteDis(ID, index) {
      // if (this.user_id == -99999) {
      //   this.$message.error("请登录后使用该功能");
      //   return;
      // }
      this.enginDeleteFlag = true;
      this.enginDeleteID = ID;
      this.enginDeleteIndex = index;
      // 删除搜索引擎接口
      axios
        .get("/deleteEngine", {
          params: {
            user_id: this.user_id,
            engine_id: this.engine_id,
          },
        })
        .then((response) => {
          console.log("删除引擎成功");
          console.log(response);
        })
        .catch((err) => {
          console.log(err);
        });
      // 关闭搜索引擎切换列表
      this.flag = false;
    },
    // 确认删除搜索引擎
    enginDeleteOK() {
      if (
        this.engineList[this.enginDeleteIndex].engineIcon == this.enginDeleteID
      ) {
        this.engineList.splice(this.enginDeleteIndex, 1);
      }
      if (this.usingEngineID == this.enginDeleteID) {
        this.usingEngineID = "#icon-baidu";
        this.usingEngineUrl = "https://www.baidu.com/s?wd=";
      }
      axios
        .get("/deleteEngine", {
          params: {
            engineName: this.newEngineName,
            engineIcon: "#icon-liulanqi",
            engineUrl: this.newEngineUrl,
          },
        })
        .then((response) => {
          console.log("添加新引擎成功");
          console.log(response);
        })
        .catch((err) => {
          console.log(err);
        });
      this.enginDeleteNO();
    },
    // 取消删除搜索引擎
    enginDeleteNO() {
      this.enginDeleteFlag = false;
      this.enginDeleteID = "";
      this.enginDeleteIndex = 99999;
      // 关闭搜索引擎切换列表
      this.flag = false;
    },
    // 新增搜索引擎按钮
    addEngine() {
      // if (this.user_id == -99999) {
      //   this.$message.error("请登录后使用该功能");
      //   return;
      // }
      this.newEngineName = "";
      this.newEngineUrl = "";
      this.addflag = !this.addflag;
      this.enginInputWarn.border = "";
      this.warnFlag = false;
    },
    // 新增搜索引擎
    sendEngine() {
      if (this.newEngineUrl == "") {
        this.warnFlag = true;
        this.enginInputWarn.border = "1.25px solid red";
        return;
      }
      if (this.newEngineName == "") {
        this.newEngineName = "自定义";
      }
      let enginObj = {
        engineName: this.newEngineName,
        engineIcon: "#icon-liulanqi",
        engineUrl: this.newEngineUrl,
      };
      this.engineList.push(enginObj);
      // 添加新引擎接口
      axios
        .get("/addEngine", {
          params: {
            user_id: this.user_id,
            engineName: this.newEngineName,
            engineUrl: this.newEngineUrl,
          },
        })
        .then((response) => {
          console.log("添加新引擎成功");
          console.log(response);
        })
        .catch((err) => {
          console.log(err);
        });

      this.newEngineName = "";
      this.newEngineUrl = "";
      this.addflag = !this.addflag;
    },
  },
};
</script>
 
<style scoped>
/* SearchBox.vue */
/* 修改placeholder属性默认文字颜色 */
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  /* WebKit browsers */
  color: rgb(255, 255, 255);
}
input:-moz-placeholder,
textarea:-moz-placeholder {
  /* Mozilla Firefox 4 to 18 */
  color: rgb(255, 255, 255);
}
input::-moz-placeholder,
textarea::-moz-placeholder {
  /* Mozilla Firefox 19+ */
  color: rgb(255, 255, 255);
  /* Firefox 默认的 placeholder 有 opacity:0.4 属性 */
  opacity: 1;
}
input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
  /* Internet Explorer 10+ */
  color: rgb(255, 255, 255);
}
/* 框架 */
.searchATimeBox {
  width: 800px;
  height: 800px;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}
.searchBox {
  width: 700px;
  margin: 0 auto;
}
/* 搜索框 */
.searchInput {
  width: 640px;
  padding: 0 30px;
  height: 45px;
  margin: 30px auto 8px auto;
  border-radius: 10rem;
  border: transparent;
  box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.25);
  outline: none;
  background-color: rgba(255, 255, 255, 0.25);
  font-size: 20px;
  text-align: center;
  transition: ease-in 0.2s background-color;
  position: relative;
  color: rgb(255, 255, 255);
  backdrop-filter: blur(1px);
}
.searchInput::-webkit-input-placeholder {
  color: rgb(255, 255, 255);
  font-size: 20px;
  transition: ease-in 0.2s all;
  text-align: center;
}
.searchInput::-moz-input-placeholder {
  color: rgb(255, 255, 255);
  font-size: 20px;
  transition: ease-in 0.2s color;
  text-align: center;
}
.searchInput:hover {
  color: rgb(0, 0, 0);
  background-color: rgba(255, 255, 255, 0.55);
  box-shadow: 0px 0px 1.5px rgba(0, 0, 0, 0.25);
}
.searchInput::-moz-input-placeholder:hover {
  color: rgb(0, 0, 0);
  background-color: rgba(255, 255, 255, 0.55);
  box-shadow: 0px 0px 1.5px rgba(0, 0, 0, 0.25);
}
.searchInput:hover::placeholder {
  color: rgb(71, 71, 71);
}
.searchInput:focus {
  color: rgb(75, 75, 75);
  background-color: rgb(245, 245, 245);
  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.25);
}
.searchInput:focus::placeholder {
  color: rgb(116, 116, 116);
}
/* 深色模式 */
.searchInputDark {
  box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.1);
  background-color: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(15px);
  color: rgb(255, 255, 255) !important;
}
.searchInputDark:hover {
  box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.2);
  color: rgb(255, 255, 255);
  background-color: rgba(0, 0, 0, 0.55);
}
.searchInputDark::-webkit-input-placeholder {
  color: rgb(255, 255, 255);
  font-size: 20px;
  transition: ease-in 0.2s all;
  text-align: center;
}
.searchInputDark::-moz-input-placeholder {
  color: rgb(255, 255, 255);
  font-size: 20px;
  transition: ease-in 0.2s color;
  text-align: center;
}
.searchInputDark:hover::placeholder {
  color: rgb(255, 255, 255);
}
.searchInputDark:focus {
  background-color: #232323d8;
  box-shadow: 0px 0px 3px 2px rgba(0, 0, 0, 0.2);
}
.searchInputDark:focus::placeholder {
  color: rgb(255, 255, 255);
}
/* 时间 */
.timeBox {
  width: 235px;
  margin: 150px auto 0 auto;
  font-size: 90px;
  line-height: 1em;
  color: rgb(242, 244, 247);
  text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.15);
  font-family: HarmonyOS;
  font-weight: 400;
}
/* .timeBoxDark {
  color: rgb(51, 51, 51);
} */
/* 搜索引擎div */
.engineChoose {
  transition: all linear 0.2s;
  width: 44px;
  height: 41px;
  padding-top: 3px;
  border-radius: 10rem;
  position: absolute;
  top: 270px;
  opacity: 0;
}
.searchInput:focus ~ .engineChoose {
  opacity: 1;
}
.searchInput:focus ~ .engineChoose:hover {
  opacity: 1;
  cursor: pointer;
  background-color: rgba(255, 255, 255, 0.9);
  box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, 0.15);
}
.searchInput:focus ~ .engineChoose:active {
  box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.08);
}
/* 深色模式 */
.searchInputDark:focus ~ .engineChoose {
  opacity: 1;
}
.searchInputDark:focus ~ .engineChoose:hover {
  background-color: #474747;
  box-shadow: 0px 0px 3px 2px rgba(0, 0, 0, 0.15);
}
.searchInputDark:focus ~ .engineChoose:active {
  box-shadow: 0px 0px 1px 1px rgba(255, 255, 255, 0.08);
}
/* 搜索按钮 */
.searchBtn {
  transition: all linear 0.3s;
  width: 44px;
  height: 41px;
  padding-top: 3px;
  border-radius: 10rem;
  position: absolute;
  top: 270px;
  right: 50px;
  opacity: 0;
  z-index: 5;
}
.searchInput:focus ~ .searchBtn {
  opacity: 1;
}
.searchInput:focus ~ .searchBtn:hover {
  cursor: pointer;
  background-color: rgba(255, 255, 255, 0.9);
  box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, 0.15);
}
.searchInput:focus ~ .searchBtn:active {
  box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.08);
}
/* 深色模式 */
.searchInputDark:focus ~ .searchBtn {
  opacity: 1;
}
.searchInputDark:focus ~ .searchBtn:hover {
  background-color: rgba(68, 68, 68, 0.9);
  box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, 0.15);
}
.searchInputDark:focus ~ .searchBtn:active {
  box-shadow: 0px 0px 1px 1px rgba(255, 255, 255, 0.08);
}
/* 图标 */
.iconChoose {
  display: inline-block;
  width: 45px;
  margin-top: 10px;
  line-height: center;
  text-align: center;
  transition: all linear 0.3s;
  font-size: 20px;
}
.icon-set {
  display: inline-block;
  width: 55px;
  margin-top: 10px;
  font-size: 40px;
  line-height: center;
  text-align: center;
  transition: all linear 0.3s;
  font-size: 20px;
}
.icon-delete {
  position: absolute;
  right: 15px;
  margin-top: 13px;
  text-align: center;
  transition: all linear 0.3s;
  font-size: 18px;
  opacity: 0;
  transition: all 0.3s;
}
.engine:hover .icon-delete {
  opacity: 1;
}
.icon-sousuo1 {
  display: inline-block;
  width: 45px;
  margin-top: 8px;
  color: rgb(116, 116, 116);
  font-size: 40px;
  line-height: center;
  text-align: center;
  transition: all linear 0.3s;
  font-size: 20px;
}
.icon-sousuo1Dark {
  color: rgb(255, 255, 255);
}
.searchBtn:hover .icon-sousuo1 {
  color: orange;
}
/* 下拉菜单 */
.showList {
  width: 700px;
  height: 0px;
  border-radius: 2rem;
  outline: none;
  background-color: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(5px);
  font-size: 20px;
  text-align: center;
  overflow: hidden;
  transition: height 0.3s ease-out;
  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.25);
}
.showList li {
  height: 29px;
  line-height: 28px;
  text-align: left;
  font-size: 18px;
  padding: 4px 34px;
  color: rgb(83, 83, 83);
  transition: all 0.15s;
  cursor: pointer;
}
.showList li:hover {
  background-color: rgba(255, 255, 255, 0.495) !important;
}
/* 深色模式 */
.showListDark {
  background-color: #232323d8;
  backdrop-filter: blur(25px);
  /* box-shadow: 0px 0px 3px 2px rgba(0, 0, 0, 0.2); */
}
.showListDark li {
  color: rgb(255, 255, 255, 0.8);
}
.showListDark li:hover {
  background-color: rgba(0, 0, 0, 0.3) !important;
}
.liClassChoose {
  background-color: rgba(255, 255, 255, 0.65);
}
.liClassChooseDark {
  background-color: rgba(0, 0, 0, 0.3);
}
/* 搜索引擎选择框 */
.searchChooseBox {
  width: 270px;
  min-height: 0px;
  overflow-y: scroll;
  overflow-x: hidden;
  position: absolute;
  top: 315px;
  left: 55px;
  border-radius: 10px;
  background-color: rgba(255, 255, 255, 0.9);
  transition: all 0.35s linear;
  scrollbar-width: none;
}
.searchChooseBox::-webkit-scrollbar {
  width: 0px;
  opacity: 0;
}
.searchChooseBox:-ms-scrollbar {
  width: 0px;
  opacity: 0;
}
/* 深色模式 */
.searchChooseBoxDark {
  background-color: rgba(48, 48, 48);
  color: #fff;
}
.engine {
  width: 255px;
  height: 40px;
  margin: 5px auto;
  border-radius: 10px;
  transition: all 0.3s;
}
.engine:hover {
  cursor: pointer;
  background-color: rgb(202, 202, 202, 0.3);
}
/* 深色模式 */
.engineDark {
  color: #fff;
}
.engineDark:hover {
  cursor: pointer;
  background-color: rgba(87, 87, 87, 0.6);
}
.engineName {
  display: inline-block;
  width: 80px;
  margin: 0 auto;
  font-size: 14px;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
}
.altP {
  display: inline-block;
  width: 50px;
  text-align: right;
  font-size: 14px;
  line-height: center;
  margin-left: 33px;
}
/* .engine span {
  display: inline-block;
  width: 45px;
  margin-top: 10px;
  font-size: 40px;
  line-height: center;
  text-align: center;
  transition: all linear 0.3s;
} */

/* 新建搜索引擎背景 */
.addEngineBg {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(255, 255, 255, 0.3);
  z-index: 105;
  backdrop-filter: blur(4px);
  display: flex;
  justify-content: center;
  align-items: center;
}
.addEngineBgDark {
  background-color: rgba(0, 0, 0, 0.3);
}
.addEngineBox {
  z-index: 155;
  width: 500px;
  height: 300px;
  padding: 20px;
  border-radius: 1rem;
  background-color: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(5px);
  transition: all 0.3s;
}
.addEngineBoxDark {
  background-color: rgba(48, 48, 48);
}
.addEngineBoxDark h2 {
  color: #fff;
}
.bgBox {
  width: 100%;
  height: 100%;
  background-color: rgb(255, 255, 255, 0.2);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 150;
  display: flex;
  justify-content: center;
  align-items: center;
}
.bgBoxDark {
  background-color: rgba(0, 0, 0, 0.3);
}
.appear-enter-active,
.appear-leave-active {
  transition: all 0.3s;
}
.appear-enter,
.appear-leave-to {
  opacity: 0;
}
.urlWarn-enter-active,
.urlWarn-leave-active {
  transition: all 0.5s;
}
.urlWarn-enter,
.urlWarn-leave-to {
  opacity: 0;
}
.addEngineBox p {
  text-align: left;
  font-size: 18px;
  margin: 4px 10px;
}
.addEngineBoxDark p {
  color: #fff;
}
.enginInput {
  width: 440px;
  height: 30px;
  padding: 0 20px;
  margin: 4px 10px;
  border-radius: 1rem;
  background-color: rgba(255, 255, 255);
  box-shadow: 0px 0px 0.6px 0.6px rgba(0, 0, 0, 0.08);
  transition: all 0.3s;
}
.enginInput:hover {
  box-shadow: 0px 0px 0.8px 0.8px rgba(0, 0, 0, 0.15);
}
.enginInput:focus {
  box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.2);
}
.enginInput::placeholder {
  color: rgb(165, 165, 165);
}
.enginInputDark {
  background-color: rgb(103, 103, 103);
  color: #fff;
}
.enginInputDark:hover {
  box-shadow: 0px 0px 0.8px 0.8px rgba(255, 255, 255, 0.15);
}
.enginInputDark:focus {
  box-shadow: 0px 0px 1px 1px rgba(255, 255, 255, 0.2);
}
.enginInputDark::placeholder {
  color: rgb(165, 165, 165);
}
.addEngineBox button {
  width: 80px;
  height: 40px;
  border-radius: 1rem;
  background-color: rgb(251, 183, 56);
  border: rgb(246, 170, 28) 1px solid;
  margin-top: 4px;
  cursor: pointer;
  transition: all 0.3s;
}
.addEngineBox button:hover {
  box-shadow: 0px 0px 1.5px 1.5px rgba(246, 170, 28, 0.45);
}
.addEngineBox button:active {
  box-shadow: 0px 0px 1px 1px rgba(246, 170, 28, 0.15);
}
</style>
